<template>
  <view class="template-orderevaluation tn-safe-area-inset-bottom">
    <view :style="{ height: vuex_custom_bar_height + 'px' }" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
          <text class="tn-text-bold tn-text-xl tn-color-black">订单评价</text>
        </view>
      </tn-nav-bar>
    </view>
    
    <!-- 内容 -->
    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom content-container">
      
      <!-- 订单状态卡片 -->
      <view class="order-status-card">
        <text class="status-text">已结束</text>
      </view>
      
      <!-- 交易信息卡片 -->
      <view class="transaction-card">
        <text class="platform-name">校园二手交易平台</text>
        <text class="transaction-amount">¥1500元</text>
      </view>
      
      <!-- 评价部分 -->
      <view class="evaluation-section">
        <view class="evaluation-question">
          <text>你觉得本次交易体验如何？</text>
        </view>
        
        <!-- 评分选项 -->
        <view class="rating-options">
          <view class="rating-option" :class="{ 'active': evaluationData.rating === 'good' }" @click="selectRating('good')">
            <view class="emoji-icon good">😊</view>
            <text class="rating-text">好评</text>
          </view>
          <view class="rating-option" :class="{ 'active': evaluationData.rating === 'neutral' }" @click="selectRating('neutral')">
            <view class="emoji-icon neutral">😐</view>
            <text class="rating-text">中评</text>
          </view>
          <view class="rating-option" :class="{ 'active': evaluationData.rating === 'poor' }" @click="selectRating('poor')">
            <view class="emoji-icon poor">😔</view>
            <text class="rating-text">差评</text>
          </view>
        </view>
        
        <!-- 差评类型选择框 (仅在选择差评时显示) -->
        <view class="poor-rating-type" v-if="evaluationData.rating === 'poor'">
          <view class="dropdown-selector" @click="toggleTypeDropdown">
            <text class="placeholder" v-if="!evaluationData.poorRatingType">选择差评类型</text>
            <text v-else>{{evaluationData.poorRatingType}}</text>
            <text class="dropdown-arrow">▼</text>
          </view>
        </view>
        
        <!-- 评价内容输入框 -->
        <view class="evaluation-content">
          <textarea 
            class="content-textarea" 
            placeholder="请输入您的评价内容..." 
            v-model="evaluationData.content"
            maxlength="200"
          />
        </view>
        
        <!-- 匿名评价选项 -->
        <view class="anonymous-option">
          <view class="custom-checkbox" @tap="toggleAnonymous">
            <view class="checkbox-inner" v-if="evaluationData.isAnonymous"></view>
          </view>
          <text class="anonymous-text">匿名评价 您的头像和昵称将在评价中隐藏</text>
        </view>
      </view>
      
      <!-- 底部提交按钮 -->
      <view class="submit-button" @click="handleSubmitEvaluation">
        提交评价
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { submitCustomReview } from '@/api/index.js'

export default {
  name: 'OrderEvaluation',
  mixins: [template_page_mixin],
  data() {
    return {
      // 项目ID
      projectId: '',
      // 评价数据
      evaluationData: {
        rating: '', // 'good', 'neutral', 'poor'
        poorRatingType: '', // 差评类型
        content: '', // 评价内容
        isAnonymous: false // 是否匿名
      },
      // 差评类型选项
      poorRatingTypes: [
        '商品质量问题',
        '描述不符',
        '物流服务差',
        '卖家服务态度',
        '其他问题'
      ],
      // 是否显示差评类型下拉菜单
      showTypeDropdown: false
    }
  },
  onLoad(options) {
    // 接收传递的项目ID
    if (options.orderNumber) {
      this.projectId = options.orderNumber
    }
  },
  methods: {
    // 选择评分
    selectRating(rating) {
      this.evaluationData.rating = rating;
      // 如果不是差评，清空差评类型
      if (rating !== 'poor') {
        this.evaluationData.poorRatingType = '';
      }
    },
    
    // 切换匿名状态
    toggleAnonymous() {
      this.evaluationData.isAnonymous = !this.evaluationData.isAnonymous;
    },
    
    // 切换类型下拉菜单显示状态
    toggleTypeDropdown() {
      this.showTypeDropdown = !this.showTypeDropdown;
      if (this.showTypeDropdown) {
        // 这里可以实现显示下拉菜单的逻辑
        uni.showActionSheet({
          itemList: this.poorRatingTypes,
          success: (res) => {
            this.evaluationData.poorRatingType = this.poorRatingTypes[res.tapIndex];
            this.showTypeDropdown = false;
          },
          fail: () => {
            this.showTypeDropdown = false;
          }
        });
      }
    },
    
    // 处理提交评价
    handleSubmitEvaluation() {
      // 表单验证
      if (!this.evaluationData.rating) {
        uni.showToast({
          title: '请选择评价类型',
          icon: 'none'
        });
        return;
      }
      
      if (this.evaluationData.rating === 'poor' && !this.evaluationData.poorRatingType) {
        uni.showToast({
          title: '请选择差评类型',
          icon: 'none'
        });
        return;
      }
      
      // 转换评分等级
      let ratingLevel = 1; // 默认好评
      if (this.evaluationData.rating === 'neutral') {
        ratingLevel = 2; // 中评
      } else if (this.evaluationData.rating === 'poor') {
        ratingLevel = 3; // 差评
      }
      
      // 准备提交数据
      const submitData = {
        badReviewType: this.evaluationData.rating === 'poor' ? this.evaluationData.poorRatingType : '',
        content: this.evaluationData.content,
        projectId: this.projectId,
        ratingLevel: ratingLevel,
        whetherAnonymous: this.evaluationData.isAnonymous ? 1 : 0
      };
      
      // 提交评价
      uni.showLoading({
        title: '提交中...'
      });
      
      submitCustomReview(submitData).then(res => {
        uni.hideLoading();
        if (res && res.code === 200) {
          uni.showToast({
            title: '评价提交成功',
            icon: 'success'
          });
          
          // 提交成功后返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg || '提交失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        uni.hideLoading();
        console.error('提交评价失败', err);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 页面容器样式 */
.template-orderevaluation {
  min-height: 100vh;
  background-color: #F8F8F8;
  position: relative;
  z-index: 0;
}

/* 内容区域 */
.content-container {
  padding-bottom: 120rpx;
}

/* 订单状态卡片样式 */
.order-status-card {
  margin: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

.status-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

/* 交易信息卡片样式 */
.transaction-card {
  margin: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

.platform-name {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.transaction-amount {
  font-size: 28rpx;
  color: #333333;
}

/* 评价部分样式 */
.evaluation-section {
  margin: 20rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 30rpx 24rpx;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

.evaluation-question {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 40rpx;
  text-align: center;
}

/* 评分选项样式 */
.rating-options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.rating-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.emoji-icon {
  font-size: 64rpx;
  margin-bottom: 10rpx;
}

.good {
  color: #F0B90B;
}

.neutral {
  color: #F0B90B;
}

.poor {
  color: #F0B90B;
}

.rating-text {
  font-size: 24rpx;
  color: #666666;
}

.rating-option.active .rating-text {
  color: #F0B90B;
  font-weight: bold;
}

/* 差评类型选择框样式 */
.poor-rating-type {
  margin-bottom: 30rpx;
}

.dropdown-selector {
  height: 80rpx;
  border: 1px solid #DDDDDD;
  border-radius: 10rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333333;
}

.placeholder {
  color: #BBBBBB;
}

.dropdown-arrow {
  color: #BBBBBB;
  font-size: 24rpx;
}

/* 评价内容输入框样式 */
.evaluation-content {
  margin-bottom: 20rpx;
}

.content-textarea {
  width: 100%;
  height: 200rpx;
  border: 1px solid #DDDDDD;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

/* 匿名选项样式 */
.anonymous-option {
  display: flex;
  align-items: center;
}

.custom-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #FFC300;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}

.checkbox-inner {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #FFC300;
}

.anonymous-text {
  font-size: 24rpx;
  color: #999999;
  margin-left: 8rpx;
}

/* 提交按钮样式 */
.submit-button {
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;
  background-color: #FFD100;
  color: #333333;
  font-size: 32rpx;
  padding: 24rpx;
  border-radius: 100rpx;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4rpx 8rpx rgba(255, 209, 0, 0.2);
}
</style>
